<template>
    <div class="addchild">
        <div class="add_item" @click="addChild">+添加少儿学员</div>
        <div class="dialog_from">
            <el-dialog title="添加少儿学员信息" :modal=false :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label-width="80px">
                        <div class="member_info">学员信息</div>
                    </el-form-item>
                    <el-form-item label="昵称：" :label-width="formLabelWidth">
                        <el-input v-model="form.nickname"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号：" :label-width="formLabelWidth">
                        <el-input v-model="form.mobile"></el-input>
                    </el-form-item>
                    <el-form-item label="真实姓名：" :label-width="formLabelWidth">
                        <el-input v-model="form.fullname"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="发送信息给学员：" :label-width="formLabelWidth">
                        <el-radio-group  v-model="form.sendmail">
                            <el-radio label=1>是</el-radio>
                            <el-radio label=0>否</el-radio>
                        </el-radio-group>
                    </el-form-item> -->
                    <el-form-item label="QQ：" :label-width="formLabelWidth">
                        <el-input v-model="form.qq"></el-input>
                    </el-form-item>
                    <el-form-item label="SKype：" :label-width="formLabelWidth">
                        <el-input v-model="form.skypenum" ></el-input>
                    </el-form-item>
                    <el-form-item label="Email：" :label-width="formLabelWidth">
                        <el-input v-model="form.email"></el-input>
                    </el-form-item>
                    <el-form-item label="性别：" :label-width="formLabelWidth">
                        <el-radio-group  v-model="form.gender">
                            <el-radio label=1>男</el-radio>
                            <el-radio label=0>女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="出生日期：" :label-width="formLabelWidth">
                        <div class="block">
                            <el-date-picker
                            v-model="form.birthday"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期">
                            </el-date-picker>
                        </div>
                    </el-form-item>
                    <el-form-item label="喜欢的动画片或玩具：" :label-width="formLabelWidth">
                        <el-input v-model="form.toycartoon"></el-input>
                    </el-form-item>
                    <el-form-item label="所在年级：" :label-width="formLabelWidth">
                        <el-select v-model="form.shoolPeriod" @change='getPeriod' placeholder="选择学年" class="divided_3">
                            <el-option 
                            v-for="(sp,a) in childData.shoolperiod"
                            :key="a" :label="sp.attriname" 
                            :value="sp.attriid"></el-option>
                        </el-select>
                        <el-select v-model="form.grade" placeholder="选择年级" class="divided_3">
                            <el-option v-for="(gradeitem,gd) in grade_lists" :key='gd' :label="gradeitem" :value="gd"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="性格特点：" :label-width="formLabelWidth">
                        <el-select v-model="form.character" placeholder="选择性格">
                            <el-option 
                            v-for="(childcc,b) in childData.childcharacters"
                            :key="b" :label="childcc.attriname" :value="childcc.attriid"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="学员头像" :label-width="formLabelWidth">
                        <el-upload
                            :action='avatar_url'
                            :data='upLoadData'
                            name='files'
                            :limit=1  
                            v-model="form.avatar"
                            :on-success='uploadAvatar'
                            list-type="picture-card"
                            :on-remove="handleRemove">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="礼品邮寄地址：" :label-width="formLabelWidth">
                        <el-cascader
                            size="large"
                            :options="options"
                            v-model="form.address"
                            @change="handleChange">
                        </el-cascader>
                        <el-input v-model="form.giftAddr" class="divided_200"></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="学习渠道：">
                        <el-checkbox-group v-model="form.studyFrom">
                            <el-checkbox 
                            v-for="(studyf,d) in childData.studyfrom"
                            :key="d" :label="studyf.attriid">{{studyf.attriname}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label-width="80px">
                        <div class="member_info">家庭信息</div>
                    </el-form-item>
                    <el-form-item label-width="80px">
                        <el-tag type="info">父亲信息</el-tag>
                    </el-form-item>
                    <el-form-item label="姓名：" :label-width="formLabelWidth">
                        <el-input v-model="form.dadname"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号：" :label-width="formLabelWidth">
                        <el-input v-model="form.dadmobile"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄：" :label-width="formLabelWidth">
                        <el-input v-model="form.dadage"></el-input>
                    </el-form-item>
                    <el-form-item label="职业性质：" :label-width="formLabelWidth">
                        <el-select v-model="form.dadjob" placeholder="选择父亲职业">
                            <el-option 
                            v-for="(dadjob,e) in childData.jobs"
                            :key="e" :label="dadjob.attriname" :value="dadjob.attriid"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label-width="80px">
                        <el-tag type="info">母亲信息</el-tag>
                    </el-form-item>
                    <el-form-item label="姓名：" :label-width="formLabelWidth">
                        <el-input v-model="form.mumname"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号：" :label-width="formLabelWidth">
                        <el-input v-model="form.mummobile"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄：" :label-width="formLabelWidth">
                        <el-input v-model="form.mumage"></el-input>
                    </el-form-item>
                    <el-form-item label="职业性质：" :label-width="formLabelWidth">
                        <el-select v-model="form.mumjob" placeholder="选择母亲职业">
                            <el-option 
                            v-for="(mumjob,f) in childData.jobs"
                            :key="f" :label="mumjob.attriname" :value="mumjob.attriid"></el-option>
                        </el-select>
                    </el-form-item>
                     <el-form-item label="家庭收入：" :label-width="formLabelWidth">
                        <el-select v-model="form.familyincome" placeholder="请选择">
                            <el-option 
                            v-for="(fain,g) in childData.familyincomes"
                            :key="g" :label="fain.attriname" :value="fain.attriid"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否已经开始学习英语：" :label-width="formLabelWidth">
                        <el-radio-group  v-model="form.alreadystudy">
                            <el-radio label=1>是</el-radio>
                            <el-radio label=0>否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item v-if='form.alreadystudy==1?true:false' label="学习了多久（单位：月）：" :label-width="formLabelWidth">
                        <el-input v-model="form.studytime"></el-input>
                    </el-form-item>
                    <el-form-item v-if='form.alreadystudy==1?true:false' label="学习英语以哪种方式开始：" :label-width="formLabelWidth">
                        <el-radio-group  v-model="form.stratway">
                            <el-radio 
                            v-for="(starw,h) in childData.startways"
                            :key="h" :label="starw.attriid">{{starw.attriname}}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item v-if='form.alreadystudy==1?true:false' label="是否接触过外教课程：" :label-width="formLabelWidth">
                        <el-radio-group  v-model="form.withforeign">
                            <el-radio label=1>是</el-radio>
                            <el-radio label=0>否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                     <el-form-item v-if='form.withforeign==1?true:false' label="学习了多久（单位：月）：" :label-width="formLabelWidth">
                        <el-input v-model="form.foreigntime"></el-input>
                    </el-form-item>
                    <el-form-item label="就读学校：" :label-width="formLabelWidth">
                        <el-input v-model="form.schoolname"></el-input>
                    </el-form-item>
                     <el-form-item v-if='form.alreadystudy==1?true:false' label="孩子在校的英语成绩排名：" :label-width="formLabelWidth">
                        <el-select v-model="form.englishrank" placeholder="选择排名">
                            <el-option 
                            v-for="(enrank,i) in childData.englishrank"
                            :key="i" :label="enrank.attriname" :value="enrank.attriid"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="孩子目前英语水平：" :label-width="formLabelWidth">
                        <el-select v-model="form.englishlevel" placeholder="请选择">
                            <el-option 
                            v-for="(enlevel,j) in childData.englislevel"
                            :key="j" :label="enlevel.attriname" :value="enlevel.attriid"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="对孩子学习英语的期望：" :label-width="formLabelWidth">
                        <el-checkbox-group v-model="form.expects">
                            <el-checkbox v-for="(expec,k) in childData.expects" :key="k" :label="expec.attriid" name="expects">{{expec.attriname}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                     <el-form-item label="更希望孩子提升哪些方面：" :label-width="formLabelWidth">
                        <el-checkbox-group v-model="form.improvefields">
                            <el-checkbox v-for="(impf,l) in childData.improvefields" :key="l" :label="impf.attriid" name="improvefields">{{impf.attriname}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="选择机构时首选考虑因素：" :label-width="formLabelWidth">
                        <el-radio-group  v-model="form.considerfield">
                            <el-radio v-for="(consfi,m) in childData.considerfields" :key="m" :label="consfi.attriid">{{consfi.attriname}}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="每周预计投入学习时间：" :label-width="formLabelWidth">
                        <el-radio-group  v-model="form.weekTime">
                            <el-radio v-for="(weekt,n) in childData.weektime" :key="n" :label="weekt.attriid">{{weekt.attriname}}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="适合孩子的上课时间：" :label-width="formLabelWidth">
                        <el-checkbox-group v-model="form.suitabletime">
                            <el-checkbox v-for="(suitt,o) in childData.suitabletime" :key="o" :label="suitt.attriid" name="suitabletime">{{suitt.attriname}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="每月孩子学习英语的预算：" :label-width="formLabelWidth">
                        <el-radio-group  v-model="form.monthbudget">
                            <el-radio ref="ref" v-for="(monthb,p) in childData.monthbudget" :key="p" :label="monthb.attriid">{{monthb.attriname}}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="希望完成课程时间：" :label-width="formLabelWidth">
                        <el-select v-model="form.finishtime" placeholder="选择时间">
                            <el-option v-for="(studyshi,q) in childData.studyshijian" :key="q" :label="studyshi.attriname" :value="studyshi.attriid"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="预算：" :label-width="formLabelWidth">
                        <el-select v-model="form.budget" placeholder="选择预算">
                            <el-option v-for="(studymon,r) in childData.studymoney" :key="r" :label="studymon.attriname" :value="studymon.attriid"></el-option>
                        </el-select>
                    </el-form-item>
                     <el-form-item label="学习诉求：" :label-width="formLabelWidth">
                        <el-input v-model="form.appeal"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="第一次付费金额：" :label-width="formLabelWidth">
                        <el-input v-model="form.firstpay" disabled></el-input>
                    </el-form-item> -->
                    <el-form-item label="老师寄语：" :label-width="formLabelWidth">
                        <el-input v-model="form.teachernote"></el-input>
                    </el-form-item>
                    <el-form-item label="学员状态：" :label-width="formLabelWidth">
                        <el-select v-model="form.state" placeholder="选择状态">
                            <el-option v-for="(membersta,s) in childData.memberStatusList" :key="s" :label="membersta.attriname" :value="membersta.attriid"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                
                <div slot="footer" class="dialog-footer">
                    <el-button class="dialog_close" @click="dialogFormVisible = false">取 消</el-button>
                    <el-button class="dialog_confirm" type="primary" @click="submitForm">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import base from '../../api/base.js'
import { regionData } from 'element-china-area-data'
 export default {
    inject:['reload'],
    data() {
        return {
                // 省市区
                options: regionData,
                // 头像
                upLoadData: {
                    bucket: 'avatar'
                },
                avatar_url:base.baseUrl+'/forum/upload/index',
                // 获取的年级列表
                grade_lists:'',
                dialogTableVisible: false,
                dialogFormVisible: false,
                form: {
                    nickname: '',
                    mobile:'',
                    fullname: '',
                    sendmail:'',
                    qq: '',
                    skypenum:'',
                    email: '',
                    gender:'',
                    birthday: '',
                    toycartoon:'',
                    shoolPeriod: '',//学年
                    xuenianid:'',
                    grade:'',//年级
                    character:'',
                    avatar:'',
                    province: '',//省
                    cityname:'',//市
                    district: '',//区
                    giftAddr:'',
                    studyFrom:[],//学习渠道
                    dadname:'',//父亲
                    dadmobile:'',
                    dadage:'',
                    dadjob:'',
                    mumname:'',//母亲
                    mummobile:'',
                    mumage: '',
                    mumjob:'',
                    familyincome: '',//家庭收入
                    alreadystudy:'',
                    studytime:'',
                    stratway:'',
                    withforeign:'',//是否接触其他外教课程
                    foreigntime:'',
                    schoolname:'',
                    englishrank:'',
                    englishlevel:'',
                    expects:[], 
                    improvefields:[],
                    considerfield:'',//考虑方面
                    weekTime:'',
                    suitabletime:[],
                    monthbudget:'',
                    finishtime:'',
                    budget:'',
                    appeal:'',
                    teachernote:'',
                    state:'',
                    delivery: false, 
                    address:[]
                },
                formLabelWidth: '200px',
                dialogImageUrl: '',//上传头像
                dialogVisible: false,
                childData:[],
                province:[],
        };
    },
    methods:{
        addChild(){
            this.dialogFormVisible = true
            this.clearAllDate()
        },
        uploadAvatar(response){
            if(response.code==200){
                this.form.avatar=response.data;
            }
        },
        // 选择地区
        handleChange (value) {
            this.form.province=value[0];
            this.form.cityname=value[1];
            this.form.district=value[2];
        },
        handleRemove(file, fileList) {
            // console.log(file, fileList);
        },
        getArea(){
           this.$axios({
                url: base.baseUrl+"/school/setting/get-city",
                method: "POST",
                header: { 'content-type': 'application/x-www-form-urlencoded' },
            }).then(res => {
                // console.log(res);
                if(res.data.code==200){
                    this.province=res.data.data;
                }else if(res.data.code==-2){
                    this.$router.push('/login')
                }
                // console.log(this.province);
            }); 
        },
        // 选择学年
        getPeriod:function(e){
            // console.log(e)
            this.form.xuenianid=e;
            this.getGrade();
        },
        getData(){
            this.$axios({
                url: base.baseUrl+"/school/member/get-student-setting ",
                method: "POST",
                header: { 'content-type': 'application/x-www-form-urlencoded' },
                data:{
                    token: localStorage.token,
                    user_role:'child'
                },
                transformRequest: [function (data) {
                    let ret = ''
                    for (let it in data) {
                        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                    }
                    return ret
                }],
            }).then(res => {
                // console.log(res);
                if(res.data.code==200){
                    this.childData=res.data.data;
                }else if(res.data.code==-2){
                    this.$router.push('/login')
                }
            });
        },
        getGrade(){
            this.$axios({
                url: base.baseUrl+"/school/setting/get-class",
                method: "POST",
                header: { 'content-type': 'application/x-www-form-urlencoded' },
                data:{
                    attid: this.form.xuenianid,
                },
                transformRequest: [function (data) {
                    let ret = ''
                    for (let it in data) {
                        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                    }
                    return ret
                }],
            }).then(res => {
                // console.log(res);
                if(res.data.code==200){
                    this.grade_lists=res.data.data;
                }else if(res.data.code==-2){
                    this.$router.push('/login')
                }
            }); 
        },
        clearAllDate(){
            this.form.nickname=''
            this.form.mobile=''
            this.form.fullname=''
            this.form.sendmail=''
            this.form.qq=''
            this.form.skypenum=''
            this.form.email=''
            this.form.gender=''
            this.form.birthday=''
            this.form.toycartoon=''
            this.form.shoolPeriod=''
            this.form.grade=''
            this.form.character=''
            this.form.avatar=''
            this.form.province=''
            this.form.cityname=''
            this.form.district=''
            this.form.giftAddr=''
            this.form.studyFrom=[]
            this.form.dadname=''
            this.form.dadmobile=''
            this.form.dadage=''
            this.form.dadjob=''
            this.form.mumname=''
            this.form.mummobile=''
            this.form.mumage=''
            this.form.mumjob=''
            this.form.familyincome=''
            this.form.alreadystudy=''
            this.form.studytime=''
            this.form.stratway=''
            this.form.withforeign=''
            this.form.foreigntime=''
            this.form.schoolname=''
            this.form.englishrank=''
            this.form.englishlevel=''
            this.form.expects=[]
            this.form.improvefields=[]
            this.form.considerfield=''
            this.form.weekTime=''
            this.form.suitabletime=[]
            this.form.monthbudget=''
            this.form.finishtime=''
            this.form.budget=''
            this.form.appeal=''
            this.form.teachernote=''
            this.form.state=''
        },
        submitForm(){
            if(this.form.state){         
                this.$axios({
                    url: base.baseUrl+"/school/member/set-child-student",
                    method: "POST",
                    header: { 'content-type': 'application/x-www-form-urlencoded' },
                    data:{
                        token: localStorage.token,
                        nickname: this.form.nickname,
                        mobile:this.form.mobile,
                        fullname:this.form.fullname,
                        sendmail:this.form.sendmail,
                        qq:this.form.qq,
                        skypenum:this.form.skypenum,
                        email:this.form.email,
                        gender:this.form.gender,
                        birthday:this.form.birthday,
                        toycartoon:this.form.toycartoon,
                        schoolPeriod:this.form.shoolPeriod,
                        grade:this.form.grade,
                        character:this.form.character,
                        avatar:this.form.avatar,
                        province:this.form.province,
                        cityname:this.form.cityname,
                        district:this.form.district,
                        giftAddr:this.form.giftAddr,
                        studyFrom:this.form.studyFrom,
                        dadname:this.form.dadname,
                        dadmobile:this.form.dadmobile,
                        dadage:this.form.dadage,
                        dadjob:this.form.dadjob,
                        mumname:this.form.mumname,
                        mummobile:this.form.mummobile,
                        mumage:this.form.mumage,
                        mumjob:this.form.mumjob,
                        familyincome:this.form.familyincome,
                        alreadystudy:this.form.alreadystudy,
                        studytime:this.form.studytime,
                        stratway:this.form.stratway,
                        withforeign:this.form.withforeign,
                        foreigntime:this.form.foreigntime,
                        schoolname:this.form.schoolname,
                        englishrank:this.form.englishrank,
                        englishlevel:this.form.englishlevel,
                        expects:this.form.expects,
                        improvefields:this.form.improvefields,
                        considerfield:this.form.considerfield,
                        weekTime:this.form.weekTime,
                        suitabletime:this.form.suitabletime,
                        monthbudget:this.form.monthbudget,
                        finishtime:this.form.finishtime,
                        budget:this.form.budget,
                        appeal:this.form.appeal,
                        teachernote:this.form.teachernote,
                        state:this.form.state   
                    },
                    transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                }).then(res => {
                    if(res.data.code==-1){
                        this.alertTip(res.data.msg)
                    }else if(res.data.code==200){
                        this.$alert('添加成功', '提示', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.reload()
                            }
                        });
                        this.dialogFormVisible = false;
                    }         
                });
            }else{
                this.alertTip('请选择学员状态')
            }
        },
        alertTip(msg){
            this.$alert(msg, '提示', {
                confirmButtonText: '确定',
                callback: action => {
                    this.$message({
                        type: 'info',
                    });
                }
            });
        }
    },
    created(){
        this.getData()
        // this.getArea()
    }
};
</script>


